//创建vue对象，vm
//我们才用的是ES6语法

let vm = new Vue({
    el: '#app',  //通过id选择器找到绑定的html内容
    // 修改VUE读取变量的语法
    delimiters: ['[[', ']]'],
    //数据对象
    data: {
        // v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',
        image_code_url: '',
        uuid: '',
        image_code: '',
        sms_code_tip: '获取短信验证码',
        send_flag: false,  // 类比于厕所，false代表厕所门开，即可以去上厕所（发短信），true代表厕所里面有人，门是关的（不能发送短信）
        sms_code: '',

        // v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        // v-message
        error_name_message: '',
        error_mobile_message: '',
        error_image_code_message: '',
        error_sms_code_message: '',
    },
    // 生命周期
    mounted() {  //页面加载完产生图形验证码，点击图形验证码也可以生成验证码，所以可以将生成验证码的代码封装到一个方法里，实现代码的复用
        //生成图形验证码
        this.genearte_image_code();
    },
    // 方法
    methods: {  // 定义和实现事件方法
        // 生成图形验证码的方法:封装，方便代码复用
        genearte_image_code() {
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },

        // 校验用户名
        check_username() {
            // 用户名是5-20个字符，[a-zA-Z0-9_-]
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 使用正则匹配用户名数据
            if (re.test(this.username)) {
                // 匹配成功，不展示错误提示信息
                this.error_name = false;
            } else {
                // 匹配失败，展示错误提示信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }

            // 判断用户名是否重复
            if (this.error_name == false) {   // 只有当用户输入的用户名满足条件时才去判断
                let url = '/usernames/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {   // 成功的报文
                        if (response.data.count == 1) {
                            //用户名已存在
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            //用户名不存在
                            this.error_name = false;
                        }
                    })
                    .catch(error => {    // 失败的报文
                        console.log(error.response)
                    })
            }
        },
        // 校验密码
        check_password() {
            let re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },
        // 校验二次密码
        check_password2() {
            if (this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        // 校验手机号码
        check_mobile() {
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }

            // 判断手机号码是否重复
            if (this.error_mobile == false) {  // 只有当用户输入的手机号码满足条件时才去判断
                // let url='/mobiles/'+this.mobile+'/count';
                let url = '/mobiles/' + this.mobile + '/count';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {   //成功的报文
                        if (response.data.count == 1) {
                            //用户名已存在
                            this.error_mobile_message = '手机号码已存在';
                            this.error_mobile = true;
                        } else {
                            //用户名不存在
                            this.error_mobile = false;
                        }
                    })
                    .catch(error => {   //失败的报文
                        console.log(error.response)
                    })
            }
        },

        //发送短信验证码
        send_sms_code() {
            // 避免恶意用户频繁的点击获取短信验证码的标签
            if (this.send_flag == true) {  //判断是否有人上厕所
                return;  //有人在上厕所，退回去
            } else {
                //可以进入到厕所，立即关门
            }
            // 校验数据：mobile，image_code
            this.check_mobile();
            this.check_image_code();
            if (this.error_image_code == true || this.error_mobile == true) {
                this.send_flag = false;
                return;
            }

            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid;
            axios.get(url, {
                responseType: 'json'
            })
                .then(response => {
                    if (response.data.code == '0') {
                        //展示倒计时成功60秒效果
                        // setInterval('回调函数','时间间隔');
                        //初始化定时器
                        let num = 60;
                        let t = setInterval(() => {
                            if (num == 1) {
                                //如果倒计时结束，则停止回调函数的执行
                                clearInterval(t); //传入定时器的编号，即setInterval的返回值
                                //还原sms_code_tip文字内容
                                this.sms_code_tip = '获取短信验证码';
                                //重新生成图形验证码
                                this.genearte_image_code();
                            } else {  //如果倒计时没有结束，则继续
                                num -= 1;
                                this.sms_code_tip = num + '秒';
                                this.send_flag = false;
                            }
                        }, 1000);
                    } else {
                        //展示错误信息，判断是图形验证码失效还是图形验证码错误
                        if (response.data.code == '4001') {   //图形验证码错误
                            this.error_image_code_message = response.data.errmsg;
                            this.error_image_code = true;
                        } else {  // 4002 手机验证码错误
                            this.error_sms_code_message = response.data.errmsg;
                            this.error_sms_code = true;
                        }
                        this.send_flag = false;
                    }
                })

                .catch(error => {
                    console.log(error.response);
                    this.send_flag = false;
                })
        },

        //校验图像验证码
        check_image_code() {
            if (this.image_code.length != 4) {
                this.error_image_code_message = '请输入图形验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }
        },

        // 校验短信验证码
        check_sms_code() {
            // console.log(this.sms_code.length)
            if (this.sms_code.length != 6) {
                this.error_sms_code_message = '请填写短信验证码';
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },


        // 校验是否勾选用户协议
        check_allow() {
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 监听表单提交事件
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_sms_code();
            this.check_allow();

            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_sms_code == true || this.error_sms_code == true || this.error_allow == true) {
                // 禁用掉表单的提交事件
                window.event.returnValue = false;
            }
        },
    }
});